<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Chat Demo | Ice for JavaScript</title>
    <link rel="icon" type="image/x-icon" href="../../../assets/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../../../assets/common.css" />
    {{#cssDeps}}
    <link rel="stylesheet" type="text/css" href="{{.}}"/>
    {{/cssDeps}}
  </head>
  <body>
    <!-- Header section that contains title and navigation bar -->
    <section id="header">
        <nav class="top-bar" data-topbar>
            <ul class="title-area">
                <li class="name">
                    <h1><a href="../../../index.html">Ice for JavaScript</a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
            </ul>
            <section class="top-bar-section">
                <!-- Right Nav Section -->
                <ul class="right">
                    <li class="divider"></li>
                    <li><a href="#" id="viewReadme">Readme</a></li>
                    <li><a href="#" id="viewSource">Source</a></li>
                </ul>
            </section>
        </nav>
        <ul class="breadcrumbs">
            <li><a href="../../../index.html">Ice</a></li>
            <li><a href="../../index.html">Demos</a></li>
            <li class="current"><a href="#">Glacier2</a></li>
            <li class="current"><a href="#">Simple Chat</a></li>
        </ul>
    </section>
    <!-- Main section that contains the user interface -->
    <section role="main" id="body">
        <!-- Sign In Form -->
        <div class="row" id="signin-form">
            <div class="large-12 medium-12 columns">
                <div class="row">
                    <div class="small-3 columns">
                        <label class="right inline">Protocol:</label>
                    </div>
                    <div class="small-9 columns">
                        <select id="protocol">
                            <option value="ws">WS</option>
                            <option value="wss">WSS</option>
                        </select>
                    </div>
                </div>
                <form>
                    <div class="row">
                        <div class="small-4 medium-3 columns">
                            <label class="right inline" for="username">Username:</label>
                        </div>
                        <div class="small-8 medium-9 columns">
                            <input type="text" id="username"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-4 medium-3 columns">
                            <label class="right inline" for="password">Password:</label>
                        </div>
                        <div class="small-8 medium-9 columns">
                            <input type="password" id="password"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="small-12 columns">
                            <a href="#" class="button small right" id="signin">Sign in</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- Error Alert -->
        <div class="row" style="display:none;" id="signin-alert">
            <div class="large-12 medium-12 columns">
                <div data-alert class="alert-box warning round">
                    <span class="error-message"></span>
                </div>
            </div>
        </div>
        <!-- Loading Indicator -->
        <div class="row" id="loading" style="display:none;">
            <div class="large-12 medium-12 columns">
                <div class="panel">
                    <h3>Loading Please Wait...</h3>
                    <div class="progress radius round">
                        <span class="meter" style="width:0%"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Chat Form -->
        <div class="row" id="chat-form" style="display:none;">
            <div class="large-12 medium-12 columns">
                <nav class="top-bar" data-topbar>
                    <ul class="title-area">
                        <li class="name">
                            <h1><a href="#">Simple Chat</a></h1>
                        </li>
                        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
                    </ul>
                    <section class="top-bar-section">
                        <!-- Right Nav Section -->
                        <ul class="right">
                            <li class="divider"></li>
                            <li class="has-form">
                                <a href="#" id="signout" class="button">Sign out</a>
                            </li>
                        </ul>
                    </section>
                </nav>
                <form>
                    <textarea id="output" class="disabled" readonly></textarea>
                    <input type="text" id="input" autocomplete="off"/>
                </form>
            </div>
        </div>
    </section>
    <!-- Modal dialog to show the client README -->
    <div id="readme-modal" class="reveal-modal medium" data-reveal>
        <h4>Simple Chat Demo Readme</h4>
        <hr/>
        <p>This example demonstrates the use of a Glacier2 session to create a
           very simple chat client.</p>

        <p>First follow the instructions from the C++ Glacier2 simpleChat demo README to
           start the server. You will also need to edit the Glacier2 configuration
           file config.glacier2 to uncomment the IceSSL.VerifyPeer=0 property if
           you want to establish a secure connection with the WSS protocol.</p>
        <div class="panel callout radius">
            <ul>
                <li>To use the C++ server you'll need a C++ compiler compatible with your
                    Ice distribution.</li>
            </ul>
        </div>

        <p>Once the simpleChat server is ready you can sign in using any username
           and password.</p>
        <div class="panel callout radius">
            <p>The client is configured to use WSS secure endpoints when the page
               is loaded over HTTPS and WS unsecure endpoints when loaded over HTTP.</p>
        </div>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    <!-- Modal dialog to show the client source code -->
    <div id="source-modal" class="reveal-modal" data-reveal>
        <a class="close-reveal-modal">&#215;</a>
        <dl class="tabs" data-tab>
            <dt></dt>
            <dd class="active"><a href="#panel2-1">Slice</a></dd>
            <dd><a href="#panel2-2">TypeScript</a></dd>
            <dd><a href="#panel2-3">HTML</a></dd>
        </dl>
        <div class="tabs-content">
            <div class="content active" id="panel2-1">
                <h6>File: browser/Glacier2/simpleChat/Chat.ice</h6>
                <pre class="source language-c" data-code="Chat.ice"></pre>
            </div>
            <div class="content" id="panel2-2">
                <h6>File: browser/Glacier2/simpleChat/Client.ts</h6>
                <pre class="source" data-code="Client.ts"></pre>
            </div>
            <div class="content" id="panel2-3">
                <h6>File: browser/Glacier2/simpleChat/index.html</h6>
                <pre class="source" data-code="index.html"></pre>
            </div>
        </div>
    </div>
    <!-- Footer section -->
    <section id="footer" class="show-for-medium-up">
        <div class="logo">
            <h4><strong>ZeroC</strong></h4>
        </div>
        <div class="copyright">
            <h6>Copyright &copy; ZeroC, Inc. All rights reserved.</h6>
        </div>
    </section>
    <!-- Common dependencies -->
    {{#jsDeps}}
    <script src="{{.}}"></script>
    {{/jsDeps}}
    <script type="text/javascript" src="../../../assets/common.js"></script>
    <!-- Ice.js (Ice run-time library) -->
    <script type="text/javascript" src="../../../node_modules/ice/lib/Ice.js"></script>
    <!-- Glacier2.js (Glacier2 client run-time library) -->
    <script type="text/javascript" src="../../../node_modules/ice/lib/Glacier2.js"></script>
    <!-- main.js (Chat Demo Application Bundle) -->
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
        if(["http:", "https:"].indexOf(document.location.protocol) !== -1)
        {
            checkGenerated(["main.js"]);
        }
    </script>
  </body>
</html>
